<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>部门名称</th>
                    <th>部门负责人</th>
                    <th>详情</th>
                </tr>
            </thead>
            <tbody>
                 <tr v-for="(item, index) in deptList" :key="item.id">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.principal }}</td>
                    <td>
                        <a @click.prevent="toDetail(item.id)"  href="">详情  </a>
                        <a @click.prevent="goDelete(item.id)" href="">  删除</a>
                    </td>
                </tr> 
            </tbody>
        </table>
        <button @click="add"><RouterLink to="/home/dept/addbox">添加部门</RouterLink></button>
        
    </div>
    <RouterView/>
</template>
<script>
export default {
    inject: ["$http"],
    data() {
        return {
            deptList: [],
            // isActive:false,
            
        }
    },
    methods: {
        async getDept() {
            let result = await this.$http.get("/deps")
            this.deptList = result.data.data.rows
            console.log(this.deptList)
        },
        toDetail(id){
            this.$router.push(`/home/deptdetail/${id}`)
        },
        async goDelete(id){
           await this.$http.delete(`/dep/${id}`)
           await this.getDept()
        },
        add(){
            // this.isActive=true
            // this.$router.push("dept/addbox")
        },
        

    },
    mounted() {
        
        this.getDept()
    },
    updated(){
        this.getDept()
    }
}
</script>
